<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动优先的响应式设计</title>
  <style>
    /* 改变盒模型 */
    * { box-sizing: border-box;}
    body {
      width: 90%;
      margin: 2em auto;
      font: 1em/1.3 Arial,Helvetica, sans-serif;
    }
    a:link,
    a:visited {
      color: #333;
    }
    nav ul,
    aside ul {
      list-style: none;
      padding: 0;
    }
    /* 使用伪元素改变元素样式 */
    nav a:link,
    nav a:visited {
      background-color: rgba(207, 232, 220, 0.2);
      border: 2px solid rgb(79, 185, 227);
      text-decoration: none;
      display: block;
      padding: 10px;
      color: #333;
      font-weight: bold;
    }
    nav a:hover {
      background-color: rgba(76, 134, 201, 0.7);
    }

    article {
      margin-bottom: 1em;
    }
    .related {
      background-color: rgba(79, 185, 227, 0.3);
      border: 1px solid rgb(79, 185, 227);
      padding: 10px;
    }
    .sidebar {
      background-color: rgba(207, 232, 220, 0.5);
      padding: 10px;
    }

    /* 移动优先的原则，当屏幕尺寸大于 40em * 16px = 640*/
    @media screen and (min-width: 40em) {
      /* 网格布局 */
      article {
        display: grid;
        grid-template-columns: 3fr 1fr;
        column-gap: 20px;
      }
      /* 伸缩盒布局 */
      nav ul {
        display: flex;
      }
      nav li {
        flex: 1;
      }
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <header>
      <nav>
        <ul>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
          <li><a href="">Meet the team</a></li>
          <li><a href="">Blog</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <div class="content">
          <h1> About | 作者介绍 </h1>
          <p> 作者【WeiyiGeek】现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。</p>
          <p> 从上面的技术栈中, 切实的体会到自己的知识匮乏, 我朝着技术狂热者前进，在漏洞挖掘、系统安全运维以及开发方面不断学习实践, 其中有血与泪同时也从中收获满满，并找到人生的价值方向，我坚信编程会改变世界、改变我的一生; </p>
        </div>
        <aside class="related">
          <p> 欢迎各位朋友关注我的微信公众号【WeiyiGeek】以及微信小程序【极客全栈修炼】，以及欢迎同道中人加入到小白到大神 <a href=" https://weiyigeek.top/visit.html">学习交流群</a>。</p>
        </aside>
      </article>
      <aside class="sidebar">
        <h2>作者学习笔记</h2>
        <ul>
          <li>
            <a href="https://blog.weiyigeek.top/2018/1-1-1.html">Security books url</a>
          </li>
          <li>
            <a href="https://blog.weiyigeek.top/2018/1-1-1.html">DevOps books url</a>
          </li>
          <li>
            <a href="https://blog.weiyigeek.top/2018/1-1-1.html">Code books url</a>
          </li>
        </ul>
      </aside>
    </main>
    <footer>
      <p> 原文作者: WeiyiGeek [https://weiyigeek.top]<br>
      转载注明出处，原文地址：https://blog.weiyigeek.top/2018/1-1-1.html<br>
      更多最新文章, 请关注我的微信公众账号【WeiyiGeek】或者【B站专栏】哟, 谢谢支持！(๑′ᴗ‵๑) ❤<br>
      </p>
    </footer>
  </div>
</body>
</html>
